/* eslint-disable @typescript-eslint/no-shadow */
import type { ProFormInstance } from '@ant-design/pro-components';
import { ProCard } from '@ant-design/pro-components';
import { ProForm, ProFormDateTimePicker, ProFormSelect, ProFormText } from '@ant-design/pro-form';
import { FooterToolbar } from '@ant-design/pro-layout';
import { Button, Col, Collapse, message, Row } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useModel } from 'umi';
import styles from './index.less';
import type {
  GateChannelTrafficData,
  GateChannelTrafficDataForm,
} from '@/pages/test/traffic/types';
import { sendTrafficPassData } from '@/pages/test/traffic/service';
import { gateCameraItem } from '@/pages/park/passes-record/service';
import { addParkBase } from '@/pages/park/park-lot/utils';

const { Panel } = Collapse;

interface addProps {
  close: (e: boolean) => void;
  isSave: (e: boolean) => void;
  id?: string;
  tenant_id?: string;
}

export default (props: addProps) => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const tenantId = currUser?.tenantId;

  const secondRef = useRef();

  const formRef = useRef<ProFormInstance>();
  const [saveHint, setSaveHint] = useState<React.ReactNode>('草稿未保存');
  const [gateChannelData, setGateChannelData] = useState<GateChannelTrafficData>();

  const [selectTenant, setSelectTenant] = useState<string>();
  const [selectZoneId, setZoneId] = useState<string>();

  useEffect(() => {}, [gateChannelData]);

  useEffect(() => {}, [tenantId]);

  return (
    <>
      <ProForm<GateChannelTrafficDataForm>
        formRef={formRef}
        submitter={{
          // 完全自定义整个区域
          render: (props, _doms) => {
            return [
              <FooterToolbar key="addFooterBar">
                <Button type="primary" key="submit" onClick={() => props.form?.submit?.()}>
                  提交
                </Button>
              </FooterToolbar>,
            ];
          },
        }}
        onFinish={async (values) => {
          const res: any = await sendTrafficPassData({ ...values });

          if (res) {
            if (res.code === 0) {
              message.success('提交成功');
            } else {
              message.error(`提交失败 ${res.message}`);
            }
          }
          return false;
        }}
        title="发送通行数据"
      >
        <ProCard
          title={<div style={{ fontSize: 20, fontWeight: 700, width: 600 }}>基础设置</div>}
          className={styles.card}
          // layout="center"
          style={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
          bordered={false}
        >
          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormSelect
                options={[
                  {
                    label: '入场',
                    value: '1',
                  },
                  {
                    label: '出场',
                    value: '2',
                  },
                  {
                    label: '等待入场',
                    value: '3',
                  },
                  {
                    label: '等待出场',
                    value: '4',
                  },
                ]}
                label={'操作类型'}
                name="type"
                placeholder="请选择操作类型"
                rules={[{ required: true, message: '请选择操作类型' }]}
              />
            </Col>
          </Row>
          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormSelect
                showSearch
                label={'通道'}
                name="channel_id"
                fieldProps={{
                  style: {
                    width: '100%',
                  },
                }}
                // request={(params) => optionsSchemeItem(params)}
                params={{ page: 1, pageSize: 10 }}
                request={async (params, props) => {
                  const res = await gateCameraItem({
                    ...params,
                    name: params.keyWords,
                    zoneId: selectZoneId,
                  });
                  if (res) {
                    return res.data.list.map((item: { id: any; name: any }, index: any) => {
                      return {
                        value: item.id,
                        label: item.name + '(' + item.id + ')',
                      };
                    });
                  }
                }}
                debounceTime={300}
                placeholder="请选择通道"
                rules={[{ required: true, message: '请选择通道' }]}
              />
            </Col>
          </Row>

          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormDateTimePicker
                label={'通行时间'}
                name="passing_time"
                placeholder="请填写车辆通行时间"
              />
            </Col>
          </Row>
          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormText
                label={'车辆'}
                name="plate_number"
                placeholder="请填写车牌"
                rules={[{ required: true, message: '请选择放行模式' }]}
              />
            </Col>
          </Row>
          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormSelect
                options={addParkBase.releaseMode.map((item, index) => ({
                  value: index + 1,
                  label: item,
                }))}
                name="release_mode"
                style={{ width: '100%' }}
                label={`放行模式`}
                placeholder="选择通道放行模式（可多选）"
                // rules={ [ { required: true, message: '请选择放行模式' } ] }
              />
            </Col>
          </Row>
          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormSelect
                options={addParkBase.autoRelease.map((item, index) => ({
                  key: String(index + 1),
                  value: String(index + 1),
                  label: item,
                }))}
                style={{ width: '100%' }}
                label={'放行规则'}
                name="auto_release"
                // rules={ [ { required: true, message: '请选择通道放行规则' } ] }
                // placeholder="选择通道放行规则（可多选）"
              />
            </Col>
          </Row>

          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormSelect
                options={[
                  {
                    label: '蓝色',
                    value: '1',
                  },
                  {
                    label: '绿色',
                    value: '2',
                  },
                  {
                    label: '黄色',
                    value: '3',
                  },
                ]}
                label={'车牌颜色'}
                name="plate_color"
                placeholder="请填写车牌颜色"
              />
            </Col>
          </Row>

          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormSelect
                options={[
                  {
                    label: '小型车',
                    value: '1',
                  },
                  {
                    label: '大型车',
                    value: '2',
                  },
                ]}
                label={'车辆类型'}
                name="car_type"
                placeholder="车辆类型"
              />
            </Col>
          </Row>

          <Row gutter={16}>
            <Col lg={6} md={12} sm={24}>
              <ProFormSelect
                options={[
                  {
                    label: '固定车',
                    value: '1',
                  },
                  {
                    label: '会员车',
                    value: '2',
                  },
                  {
                    label: '临时车',
                    value: '4',
                  },
                ]}
                label={'车辆属性'}
                name="car_attributes"
                placeholder="车辆属性"
              />
            </Col>
          </Row>
        </ProCard>
      </ProForm>
    </>
  );
};
